<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/'})" class="return"></a>
			<router-link class="operating" tag="span" to="/Register">我要注册</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<img class="logo" src="../assets/images/logo.png" alt="">
				<div class="title-hd">欢迎登录</div>
				<div class="main">
					<van-cell-group>
						<van-field v-model.trim="Account" maxlength="11" placeholder="请输入账号" clearable />
					</van-cell-group>
					<van-cell-group>
						<van-field  v-model.trim="Pwd" type="password" placeholder="密码" clearable />
					</van-cell-group>
				</div>
				<div class="text">
					<flexbox>
						<flexbox-item>
							<div class="flex-demo tal">

							</div>
						</flexbox-item>
						<flexbox-item>
							<div class="flex-demo tar">
								<router-link to="/FindPwd" tag="span">忘记密码？</router-link>
							</div>
						</flexbox-item>
					</flexbox>
				</div>
				<div class="btn">
					<van-button slot="button" size="normal" :loading="loading" loading-text="登录" type="info" @click.native="Login">登录</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { base } from './../utils/api';
	let _this;
	export default {
		name: 'Login',
		data() {
			return {
				Account: '', // 账号
				Pwd: '', // 密码
				loading: false,
				k:'', // 凭证K值
				v:'', // 凭证V值
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			
		},
		methods: {
			Login() {
				// 判断手机号码
				if(!this.Account) {
					Toast('手机号码不能为空');
					return false;
				} else {
					if(this.Account.length < 3 || this.Account.length > 11) {
						Toast('帐号长度在3-11之间');
						return false;
					}
				}
				// 密码
				if(!this.Pwd) {
					Toast('密码不能为空');
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 20) {
						Toast('密码长度在6-20之间');
						return false;
					}
				}
				// 登录
				this.loading = true;
				this.axios.defaults.headers['Authorization'] = 'mNrNeheLd2NTCxBkgxMASrkNyB4Mb9wRk2qQX2Q5H6h6Q/++ayEFo2o+2IDPV1m0nWbPPFbt3b/rZwAUvMydsmQW+xQ+dLJTzOjlz9tQNKKSC+2iV+1UUiUW74QP3BQBPbyfH/1qdKuwOeXplyjLv3nmWiDys9CCMxPjhDU/qyA=';
				base.getCredentials().then(res => {
					if(res.code == 8008){
						this.k = res.data.k;
						this.v = res.data.v;
						base.getSignUp({
							'username': this.Account,
							'password': this.rsaEncrypt(this.Pwd + ',' + this.k + ','  + this.v)
						}).then(res => {
							if(res.code == 8008) {
								sessionStorage.token = res.data.access_token;
								sessionStorage.Account = this.Account;
								this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
								this.$router.push({
									path: '/'
								})
							}
							Toast({
								duration: 1000,
								message: res.msg
							});
							this.loading = false;
						})
					}
				})
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[\u4e00-\u9fa5]/ig, ' '); // 帐号不能输入中文
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
 .btn /deep/ .van-button{background:#525fd6!important;border:1px solid #525fd6!important}
	.header {
		position: relative;
		height: 46px;
	}
	
	.close {
		position: absolute;
		top: 5px;
		left: 5px;
	}
	
	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 5px 20px 20px;
	}
	
	.weui-cells:after {
		left: 15px;
		right: 15px;
	}
	
	.weui-cells .weui-cell {
		padding: 15px 0;
	}
	
	.main {
		margin: 0 20px;
		overflow: hidden;
	}
	
	.btn {
		padding: 30px 20px;
	}
	
	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
	
	.logo {
		width: 42%;
		display: block;
		margin: 15% auto 5%;
	}
	
	.yzm {
		/deep/ .weui-cells .weui-cell {
			padding: 5px 0;
		}
	}
	
	input {
		padding: 15px 10px;
	}
	
	.head~.overlay {
		top: 45px;
	}

	/deep/.van-cell-group{
		background:none;
		.van-cell{
			background:none;
		}
	}
	/deep/.van-hairline--top-bottom{
		border:0;
	}
</style>